<template>
  <div id="quotationInfo">
    <div class="nav">
      <span
        @click="$router.go(-1)"
        style="font-size: 0.36rem;font-weight: bold;color: #cfd3e9;margin-right:.2rem;"
      >
        <van-icon name="arrow-left" />
      </span>
      <span class="active">VC/CNN</span>
    </div>
    <div class="rootMain">
      <div class="quotation-box">
        <div class="q-top">
          <div class="qt-left" v-if="ratio>0">
            <h4 class="line-up">{{newprice}}</h4>
            <label>
              <!-- ≈￥123.00 -->
              <em class="line-up">{{ratio}}%</em>
            </label>
          </div>
          <div class="qt-left" v-else>
            <h4 class="line-down">{{newprice}}</h4>
            <label>
              <!-- ≈￥123.00 -->
              <em class="line-down">{{ratio}}%</em>
            </label>
          </div>
          <div class="qt-right">
            <span>
              高
              <b>{{high}}</b>
            </span>
            <span>
              低
              <b>{{low}}</b>
            </span>
            <span>
              24H量
              <b>{{volumn}}</b>
            </span>
          </div>
        </div>
        <div class="q-nav">
          <div>
            <span :class="active==0?'active':''" @click="lineType(0)" v-show="false">分时</span>
            <span :class="active==1?'active':''" @click="lineType(1)">日线</span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <!-- <span>15分钟</span>
            <span>1小时</span>
            <span>4小时</span>
            <span class="">日线</span>
            <span class="hasmore">更多</span>
            <span class="hasmore">指标</span>-->
          </div>
          <div class="more" v-show="false">
            <ul>
              <li>1分钟</li>
              <li>5分钟</li>
              <li>30分钟</li>
              <li>1周</li>
              <li>1月</li>
            </ul>
          </div>
        </div>
        <!-- canvas k线图 -->
        <div class="q-echart">
          <div class="q-vals" v-if="active==1">
            <span>{{ma5}}</span>
            <span>{{ma10}}</span>
            <span>{{ma20}}</span>
          </div>
          <div
            id="echartContainer0"
            ref="echartContainer0"
            style="width:100%; height:400px"
            v-if="active=='0'"
          ></div>
          <div id="echartContainer" ref="echartContainer" style="width:100%; height:400px" v-else></div>
        </div>
        <div class="q-history">
          <div class="q-header">
            <span :class="tab==1?'active':''" @click="changeTab(1)">委托挂单</span>
            <span :class="tab==2?'active':''" @click="changeTab(2)">成交</span>
            <span :class="tab==3?'active':''" @click="changeTab(3)">简介</span>
          </div>
          <div class="q-nav" v-if="tab==1">
            <h4>买盘 数量(VC)</h4>
            <h4>价格(CNN)</h4>
            <h4>数量(VC) 卖盘</h4>
          </div>
          <div class="q-nav2" v-else-if="tab==2">
            <h4>时间</h4>
            <h4>方向</h4>
            <h4>价格(CNN)</h4>
            <h4>数量(VC)</h4>
          </div>
          <div class="q-list" v-if="tab==1">
            <div class="q-left">
              <div class="q-item" v-for="(e,i) in buyList" :key="i">
                <span>{{i+1}} {{e.amount}}</span>
                <span class="line-up">{{e.price}}</span>
              </div>
              <div class="q-item" v-if="buyList.length<20" v-for="(e,k) in 20-buyList.length">
                <span>{{k+1+buyList.length}} -</span>
                <span class="line-up">-</span>
              </div>
            </div>
            <div class="q-right">
              <div class="q-item" v-for="(e,i) in sellList" :key="i">
                <span class="line-down">{{e.price}}</span>
                <span>{{e.amount}} {{i+1}}</span>
              </div>
              <div
                class="q-item"
                v-if="sellList.length<20"
                v-for="(ele, k) in 20 - sellList.length"
              >
                <span class="line-down">-</span>
                <span>- {{k+1+sellList.length}}</span>
              </div>
            </div>
          </div>
          <div class="q-list2" v-else-if="tab==2">
            <div class="q-item" v-for="(e,i) in dealList" :key="i">
              <span>{{e.createTime | formatDate}}</span>
              <span v-if="e.tradeType==1" class="line-up">买入</span>
              <span v-else class="line-down">卖出</span>
              <span>{{e.price}}</span>
              <span>{{e.amount}}</span>
            </div>
          </div>
          <div class="q-info" v-else>
            <h4>VC币(vc)</h4>
            <p>
              <span>发行时间</span> -
            </p>
            <p>
              <span>发行总量</span> -
            </p>
            <p>
              <span>流通总量</span> -
            </p>
            <p>
              <span>众筹价格</span> -
            </p>
            <p>
              <span>白皮书</span> -
            </p>
            <p>
              <span>官网</span> -
            </p>
            <p>
              <span>区块查询</span> -
            </p>
            <h4>简介</h4>
            <p>敬请期待</p>
          </div>
        </div>
      </div>
    </div>
    <div class="q-bottom">
      <div class="btn q-buy bg-up" @click="goTrade(1);">买入</div>
      <div class="btn q-sell bg-down" @click="goTrade(2);">卖出</div>
      <div :class="['add-collect',collect?'collect':'']" @click="addCollect">
        <i class="iconfont icon-shoucang"></i>
        <p v-if="!collect">添加自选</p>
        <p v-else>已添加</p>
      </div>
    </div>
    <Loading v-show="showLoading"></Loading>
  </div>
</template>
<script>
import $ from "jquery";
import { formatDate } from "@/assets/js/filters.js";
import Loading from "@/components/loadingPop";
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      collect: false,
      //数据模型 0时间 1开 2关 3最低 4最高 5成交量 (后面的可以不要也可以修改为其他想要的 如 涨跌额 涨跌幅等) tag6 macd7 dif8 dea9
      data: [],
      newprice: "-",
      ratio: "",
      low: "",
      high: "",
      volumn: "",
      timer: "",
      active: "1",
      tab: "1",
      buyList: "",
      sellList: "",
      dealList: "",
      showLoading: false,
      ma5: "MA5: - ",
      ma10: "MA10: - ",
      ma20: "MA20: - "
    };
  },
  created() {
    this.getnewPrice();
    this.getKline();
    this.getmarketDepth();
    this.timer = setInterval(() => {
      this.getnewPrice();
      // this.getKline();
      this.getmarketDepth();
      this.getDealList();
    }, 5000);
  },
  filters: {
    formatDate(time) {
      var data = new Date(time.replace(/-/g, "/"));
      return formatDate(data, "hh:mm:ss");
    }
  },
  components: {
    Loading
  },
  computed: {},
  mounted() {},
  methods: {
    changeTab(index) {
      this.tab = index;
    },
    lineType(index) {
      this.active = index;
      // 设置K线
      this.getKline();
    },
    // 添加自选
    addCollect() {
      this.collect = !this.collect;
    },
    goTrade(type) {
      this.$router.replace(`/quotationTrade?s=btc_usdt&t=${type}`);
    },
    // 最新成交价
    getnewPrice() {
      Services.newPrice().then(res => {
        // console.log(res);
        if (res.code == "0000") {
          this.newprice = res.vcPrice.toFixed(3);
          this.ratio = res.percent;
          this.low = res.kline.low.toFixed(2);
          this.high = res.kline.high.toFixed(2);
          this.volumn = res.kline.volumn.toFixed(2);
        }
      });
    },
    // 市场深度
    getmarketDepth() {
      Services.marketDepth({
        depth: 20
      }).then(res => {
        // console.log(res);
        if (res.code == "0000") {
          this.buyList = res.buyList;
          this.sellList = res.sellList.reverse();
        }
      });
    },
    getDealList() {
      Services.getDealList().then(res => {
        // console.log(res);
        if (res.code == "0000") {
          this.dealList = res.list;
        }
      });
    },
    getKline() {
      this.showLoading = true;
      let endTime = this.formatDateTime(new Date());
      // console.log(endTime);
      let startTime = this.formatDateTime1(new Date());
      // console.log(startTime);
      if (this.active != "1") {
        startTime = this.formatDateTime2(new Date(endTime));
        // console.log("修改时间" + startTime);
        // endTime =this.
        // return;
      }
      // let _this = this;
      // $.ajax({
      //   type: "GET",
      //   headers: {
      //     Accept: "application/json; charset=utf-8"
      //   },
      //   url: "/static/js/data.json",
      //   success: function(res) {
      //     console.log("+++++++++++++++++++++++++++");
      //     console.log(res);
      //     _this.data = res;
      //     console.log(_this.data);
      //     _this.kInit();
      //   }
      // });
      Services.getKline({
        startTime: startTime,
        endTime: endTime,
        lineType: this.active
      }).then(res => {
        // console.log(res);
        this.data = res.data;
        // Toast("获取成功");
        // 初始化K线图
        this.kInit(this.active);
      });
    },

    formatDateTime2(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate() - 1; //deling test -1 为了有数据测试
      // console.log(d);
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " 00:00:00";
    },

    formatDateTime1(date) {
      var y = date.getFullYear() - 1;
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },

    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    kInit(type) {
      function splitData(rawData) {
        var categoryData = [];
        var values = [];
        var volumes = [];
        var opens = [];
        // for (var i = 0; i < 5; i++) {
        for (var i = 0; i < rawData.length; i++) {
          // if (type == "0") {
          //   categoryData.push(rawData[i].splice(0, 1)[0]);
          //   // categoryData.push(rawData[5].splice(0,1)[0])
          // } else {
          //数据模型 0时间 1开 2关 3最低 4最高 5成交量 (后面的可以不要也可以修改为其他想要的 如 涨跌额 涨跌幅等) tag6 macd7 dif8 dea9
          // console.log(rawData[i]);

          categoryData.push(rawData[i].splice(0, 1)[0]);
          // categoryData.push(rawData[i]);
          // }
          values.push(rawData[i]);
          volumes.push([
            i,
            rawData[i][4],
            rawData[i][0] > rawData[i][1] ? 1 : -1
          ]);
          opens.push(rawData[i][1]);
        }
        console.log(values);
        return {
          categoryData: categoryData,
          values: values,
          volumes: volumes,
          opens: opens
        };
      }
      function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
          if (i < dayCount) {
            result.push("-");
            continue;
          }
          var sum = 0;
          for (var j = 0; j < dayCount; j++) {
            sum += data.values[i - j][1];
          }
          result.push(+(sum / dayCount).toFixed(3));
        }
        return result;
      }
      var data = splitData(this.data);
      // type 0分时
      console.log(data.categoryData);

      if (this.active == "0") {
        // console.log("分时图");
        var option0 = {
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: data.categoryData,
              axisLine: {
                show: false,
                onZero: false,
                lineStyle: {
                  color: "#6d87a8"
                }
              },
              // axisLabel:{
              //   show:false,
              // },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#465166",
                  width: 0.5,
                  type: "solid"
                }
              },
              axisTick: false,
              splitNumber: 10,
              min: "dataMin",
              max: "dataMax",
              axisPointer: {
                z: 100
              }
            },
            {
              type: "category",
              gridIndex: 1,
              data: data.categoryData,
              scale: true,
              boundaryGap: false,
              axisLine: { onZero: false },
              axisTick: { show: false },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#465166",
                  width: 0.5,
                  type: "solid"
                }
              },
              axisPointer: {
                type: "shadow",
                z: 100
              },
              axisLabel: { show: false },
              splitNumber: 20,
              min: "dataMin",
              max: "dataMax"
            }
          ],
          yAxis: [
            {
              type: "value",
              splitArea: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#465166",
                  width: 0.5,
                  type: "solid"
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#6d87a8"
                }
              },
              axisLabel: {
                // inside: true,
                // formatter: "{value}\n"
              },
              axisTick: false,
              position: "right"
            },
            {
              scale: true,
              gridIndex: 1,
              splitNumber: 2,
              axisLabel: {
                // inside: true,
                formatter: "{value}\n"
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#6d87a8"
                }
              },
              axisTick: { show: false },
              splitLine: { show: false },
              position: "right"
            }
          ],
          // 网格
          grid: [
            {
              left: "0",
              right: "15%",
              top: "0",
              height: "80%"
            },
            {
              left: "0",
              right: "15%",
              top: "85%",
              height: "15%"
            }
          ],
          // 缩放条
          dataZoom: [
            {
              show: true,
              type: "inside",
              start: 0,
              end: 100
            }
            // {
            //   show: false,
            //   xAxisIndex: [0, 1],
            //   type: "slider",
            //   top: "85%",
            //   start: 0,
            //   end: 100
            // }
          ],
          series: [
            {
              symbol: "none",
              data: data.opens,
              type: "line",
              itemStyle: {
                color: "#4d8aff"
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#5580D2" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "transparent" // 100% 处的颜色
                    }
                  ]
                  // global: false // 缺省为 false
                }
              }
            },
            {
              name: "Volume",
              type: "bar",
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: data.volumes
            }
          ]
        };
        // 测试折线图
        // option0 = {
        //   xAxis: {
        //     type: "category",
        //     boundaryGap: false,
        //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        //   },
        //   yAxis: {
        //     type: "value"
        //   },
        //   series: [
        //     {
        //       data: [820, 932, 901, 934, 1290, 1330, 1320],
        //       type: "line",
        //       areaStyle: {}
        //     }
        //   ]
        // };
        var charts0 = this.$echarts.init(this.$refs.echartContainer0, null, {
          renderer: "svg"
        });
        charts0.setOption(option0, true);
      } else {
        // 日线
        var _this = this;
        var option = {
          // backgroundColor: "#fff",
          // animation: false,
          // legend: {
          //   bottom: 10,
          //   left: "center",
          //   data: ["Dow-Jones index", "MA5", "MA10", "MA20", "MA30"]
          // },
          //提示框
          tooltip: {
            trigger: "axis",
            triggerOn: "click",
            formatter: function(param) {
              // console.log(param);
              param.forEach((ele, index) => {
                if (param[index].seriesIndex == 1) {
                  _this.ma5 = "MA5:" + param[index].data;
                }
                if (param[index].seriesIndex == 2) {
                  _this.ma10 = "MA10:" + param[index].data;
                }
                if (param[index].seriesIndex == 3) {
                  _this.ma20 = "MA20:" + param[index].data;
                }
              });
              //数据模型 time0 open1 close2 min3 max4 vol5 tag6 macd7 dif8 dea9
              if (param[0].axisIndex == 0) {
                param = param[0];
                return [
                  "时间: " +
                    param.name +
                    "<hr size=1 style='margin: 3px 0 ; height:1px; border:none;background:#6d87a8'>",
                  "开:" + param.data[1] + "<br/>",
                  "收: " + param.data[2] + "<br/>",
                  "低: " + param.data[3] + "<br/>",
                  "高: " + param.data[4] + "<br/>",
                  "涨跌额: " +
                    (param.data[2] - param.data[1]).toFixed(2) +
                    "<br/>",
                  "涨跌幅: " +
                    (
                      ((param.data[2] - param.data[1]) / param.data[1]) *
                      100
                    ).toFixed(2) +
                    "%<br/>",
                  "成交量: " + param.data[5]
                ].join("");
              } else {
                // return [
                //   param[0].name + "<br/>",
                //   "MACD:" + param[0].data + "<br/>",
                //   "DIF: " + param[1].data + "<br/>",
                //   "DEA: " + param[2].data
                // ].join("");
              }
            },
            position: function(pos, params, el, elRect, size) {
              var obj = { top: 30 };
              obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 10;
              return obj;
            },
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#131F30"
              },
              link: {
                xAxisIndex: ""
              }
            },
            backgroundColor: "rgba(19,31,48,.9)",
            borderWidth: 1,
            borderColor: "#3c3c3c",
            borderRadius: 2,
            padding: 10,
            textStyle: {
              color: "#6d87a8",
              fontSize: 12
            }
          },
          axisPointer: {
            link: { xAxisIndex: "all" },
            label: {
              backgroundColor: "#777"
            }
          },
          toolbox: {
            show: false,
            feature: {
              dataZoom: {
                yAxisIndex: false
              },
              brush: {
                type: ["lineX", "clear"]
              }
            }
          },
          brush: {
            xAxisIndex: "all",
            brushLink: "all",
            outOfBrush: {
              colorAlpha: 0.1
            }
          },
          visualMap: {
            show: false,
            seriesIndex: 5,
            dimension: 2,
            pieces: [
              {
                value: 1,
                color: "#d14b64"
              },
              {
                value: -1,
                color: "#03ad8f"
              }
            ]
          },
          // 网格
          grid: [
            {
              left: "0",
              right: "15%",
              top: "0",
              height: "80%"
            },
            {
              left: "0",
              right: "15%",
              top: "85%",
              height: "15%"
            }
          ],
          xAxis: [
            {
              type: "category",
              data: data.categoryData,
              scale: true,
              boundaryGap: false,
              axisLine: {
                show: false,
                onZero: false,
                lineStyle: {
                  color: "#6d87a8"
                }
              },
              // axisLabel:{
              //   show:false,
              // },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#465166",
                  width: 0.5,
                  type: "solid"
                }
              },
              axisTick: false,
              splitNumber: 20,
              min: "dataMin",
              max: "dataMax",
              axisPointer: {
                label: { show: false },
                type: "shadow",
                z: 100
              }
            },
            {
              type: "category",
              gridIndex: 1,
              data: data.categoryData,
              scale: true,
              boundaryGap: false,
              axisLine: { onZero: false },
              axisTick: { show: false },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#465166",
                  width: 0.5,
                  type: "solid"
                }
              },
              axisPointer: {
                type: "shadow",
                z: 100
              },
              axisLabel: { show: false },
              splitNumber: 20,
              min: "dataMin",
              max: "dataMax"
            }
          ],
          yAxis: [
            {
              scale: true,
              // splitArea: {
              //   show: false
              // },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#465166",
                  width: 0.5,
                  type: "solid"
                }
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#6d87a8"
                }
              },
              axisLabel: {
                // inside: true,
                formatter: "{value}\n"
              },
              axisTick: false,
              position: "right"
            },
            {
              scale: true,
              gridIndex: 1,
              splitNumber: 2,
              axisLabel: {
                // inside: true,
                formatter: "{value}\n"
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#6d87a8"
                }
              },
              axisTick: { show: false },
              splitLine: { show: false },
              position: "right"
            }
          ],
          // 缩放条
          dataZoom: [
            {
              show: false,
              type: "inside",
              xAxisIndex: [0, 1],
              start: 0,
              end: 100
            },
            {
              show: false,
              xAxisIndex: [0, 1],
              type: "slider",
              top: "85%",
              start: 0,
              end: 100
            }
          ],
          //
          series: [
            {
              name: "日K",
              type: "candlestick",
              data: data.values,
              itemStyle: {
                color: "#03ad8f",
                borderColor: "#03ad8f",
                color0: "#d14b64",
                borderColor0: "#d14b64"
              }
              // tooltip: {
              //   formatter: function(param) {
              //     param = param[0];
              //     return [
              //       "Date: " + param.name + '<hr size=1 style="margin: 3px 0">',
              //       "Open: " + param.data[0] + "<br/>",
              //       "Close: " + param.data[1] + "<br/>",
              //       "Lowest: " + param.data[2] + "<br/>",
              //       "Highest: " + param.data[3] + "<br/>"
              //     ].join("");
              //   }
              // }
            },
            {
              symbol: "none",
              name: "MA5",
              type: "line",
              data: calculateMA(5, data),
              smooth: true,
              color: "#ceb0ff",
              lineStyle: {
                normal: {
                  opacity: 0.8,
                  color: "#ceb0ff"
                }
              }
            },
            {
              symbol: "none",
              name: "MA10",
              type: "line",
              data: calculateMA(10, data),
              smooth: true,
              color: "#18cbac",
              lineStyle: {
                normal: {
                  opacity: 0.8,
                  color: "#18cbac"
                }
              }
            },
            {
              symbol: "none",
              name: "MA20",
              type: "line",
              data: calculateMA(20, data),
              smooth: true,
              color: "#ffe5b1",
              lineStyle: {
                normal: {
                  opacity: 0.8,
                  color: "#ffe5b1"
                }
              }
            },
            {
              symbol: "none",
              name: "MA30",
              type: "line",
              data: calculateMA(30, data),
              smooth: true,
              color: "#ffe5b1",
              lineStyle: {
                normal: {
                  opacity: 0.8,
                  color: "#ffe5b1"
                }
              }
            },
            {
              name: "Volume",
              type: "bar",
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: data.volumes
            }
          ]
        };
        var charts = this.$echarts.init(this.$refs.echartContainer, null, {
          renderer: "svg"
        });
        charts.setOption(option, true);
      }
      this.showLoading = false;
      // charts.dispatchAction({
      //   type: "brush",
      //   areas: [
      //     {
      //       brushType: "lineX",
      //       coordRange: ["2016-06-02", "2016-06-20"],
      //       xAxisIndex: 0
      //     }
      //   ]
      // });
    }
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#quotationInfo {
  height: 100%;
  background: #131f30;

  .nav {
    padding: 0 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.88rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    background: #131f30;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
    z-index: 999;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #cfd3e9;
      font-size: 0.22rem;
      height: 100%;
      letter-spacing: 0.02rem;
      padding: 0 0.1rem;
      position: relative;
      &.active {
        font-size: 0.3rem;
        font-weight: bold;
        color: #cfd3e9;
      }
    }
  }
  .rootMain {
    height: calc(100% - 2.48rem);
    top: 0.88rem;
    background: #131f30;
    overflow-y: auto;
    .quotation-box {
      color: #6d87a8;
      height: 100%;
      .q-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0.3rem 0;
        height: 1.6rem;
        > div {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 1.2rem;
        }
        .qt-left {
          width: 60%;
          h4 {
            font-size: 0.55rem;
          }
          label {
            font-size: 0.24rem;
          }
        }
        .qt-right {
          width: 40%;
          span {
            display: flex;
            justify-content: space-between;
            align-items: center;
            b {
              color: #cfd3e9;
            }
          }
        }
      }
      .q-nav {
        height: 0.55rem;
        div {
          display: flex;
          align-items: flex-end;
          justify-content: space-around;
          height: 0.55rem;
          span {
            padding: 0.04rem 0;
            border-bottom: 0.04rem solid transparent;
            &.active {
              color: #cfd3e9;
              border-color: #cfd3e9;
            }
            &.hasmore {
              position: relative;
              overflow: hidden;
              min-width: 0.9rem;
              text-align: center;
              &::before {
                content: "";
                display: block;
                position: absolute;
                bottom: -0.08rem;
                right: -0.08rem;
                background: #6d87a8;
                width: 0.1rem;
                height: 0.3rem;
                transform: rotate(45deg);
              }
            }
          }
        }
      }
      .q-echart {
        position: relative;
        width: 100%;
        // height: calc(100% - 3.75rem);
        .q-vals {
          position: absolute;
          width: 100%;
          height: 0.5rem;
          padding: 0 0.3rem;
          display: flex;
          align-items: center;
          top: 0;
          left: 0;
          font-size: 0.2rem;
          span {
            margin-right: 0.4rem;
            opacity: 0.8;
            &:nth-of-type(1) {
              color: #ceb0ff;
            }
            &:nth-of-type(2) {
              color: #18cbac;
            }
            &:nth-of-type(3) {
              color: #ffe5b1;
            }
            &:nth-of-type(4) {
              color: #ffe5b1;
            }
          }
        }
      }
      .q-history {
        margin-top: 0.3rem;
        padding: 0 0.3rem;
        .q-header {
          display: flex;
          align-items: center;
          span {
            width: 33.333333%;
            height: 0.65rem;
            text-align: center;
            border-bottom: 0.04rem solid transparent;
            &.active {
              color: #1882d4;
              border-color: #1882d4;
            }
          }
        }
        .q-nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 0.65rem;
          h4 {
            width: 30%;
            &:nth-of-type(2) {
              width: 40%;
              text-align: center;
            }
            &:nth-of-type(3) {
              text-align: right;
            }
          }
        }
        .q-nav2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 0.65rem;
          h4 {
            width: 25%;
          }
        }
        .q-list2 {
          .q-item {
            display: flex;
            justify-content: space-between;
            height: 0.45rem;
            span {
              width: 25%;
            }
          }
        }
        .q-list {
          display: flex;
          .q-left,
          .q-right {
            width: 50%;
          }
          .q-item {
            display: flex;
            justify-content: space-between;
            height: 0.45rem;
            .line-up {
              padding-right: 0.05rem;
            }
            .line-down {
              padding-left: 0.05rem;
            }
          }
          // .q-left{

          // }
        }
        .q-info {
          h4 {
            height: 1rem;
            font-size: 0.32rem;
            font-weight: 600;
            display: flex;
            align-items: center;
          }
          p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 0.55rem;
            color: #fff;
            span {
              color: #6d87a8;
            }
          }
        }
      }
    }
  }
  .q-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.6rem;
    padding: 0.15rem 0.3rem 0;
    background: #172841;
    box-shadow: 0 0 16px 0 #081724;
    color: #6d87a8;
    display: flex;
    .btn {
      width: 2.6rem;
      margin: 0.3rem 0.4rem 0 0;
      border-radius: 0;
    }
    .add-collect {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &.collect {
        color: #cfd3e9;
      }
      i {
        font-size: 0.38rem;
      }
      p {
        font-size: 0.2rem;
      }
    }
  }
}
</style>